<template>
<div class="my_info">
   <van-nav-bar left-arrow title="个人信息" @click-left="goBack" />
   <div class="user_header"> 
     <van-image class="header_img"
        :src="userinfo.u_photo"
      />
      <van-uploader accept='file' :after-read="upload"	>
        <van-button type="primary" size="mini">更换头像</van-button>
      </van-uploader>
   </div>

  <van-form class="user_cell_form" @submit="onSubmit">
    <van-field
      v-model="userinfo.u_name"
      name="账户"
      label="账户"
      placeholder="账户"
    />
    <van-field
      v-model="userinfo.u_nick"
      name="昵称"
      label="昵称"
      :rules="userRules.u_nick"
      placeholder="昵称"
    />
    <van-field
      name="性别"
      label="性别"
      :rules="userRules.u_sex"
    >
      <template #input>
        <van-radio-group class="sex_option" v-model="userinfo.u_sex">
          <van-radio name="男">男</van-radio>
          <van-radio name="女">女</van-radio>
        </van-radio-group>
      </template>
    </van-field>
    <van-field
      v-model="userinfo.u_phone"
      name="电话号码"
      label="电话号码"
      placeholder="电话号码"
      :rules="userRules.u_phone"
    />
    <van-field
      v-model="userinfo.u_email"
      name="邮箱"
      label="邮箱"
      placeholder="邮箱"
      :rules="userRules.u_email"
    />
    <div style="margin:16px;">
      <van-button round block type="info" native-type="submit">提交</van-button>
    </div>
</van-form>
</div>
</template>
<script>
function validatorNick(val){
  let reg=/^[^<>`~!/\@\\#}$%:;)(_^{&*=|'+]+$/
  return reg.test(val)
}
function validatorPhone(val){
    let reg=/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
  return reg.test(val)
}
function validatorEmail(val){
    let reg=/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
  return reg.test(val)
}

export default {
    data() {
      return {
        userinfo:null,
        show:false,
        userRules:{
          u_nick:[{validator:validatorNick, required: true, message: '请填写正确用户昵称' }],
          u_phone:[{validator:validatorPhone, required: true, message: '请填写正确用户手机号' }],
          u_email:[{validator: validatorEmail, required: true, message: '请填写正确用户邮箱' }],
        }
      }
    },
    created(){
      this.userinfo=JSON.parse(localStorage.getItem('userinfo'))
    },
    
    methods: {
      // 返回上级
      goBack(){
        this.$router.push('/mypage')
      },
      async onSubmit(){
        console.log(1111);
        let errKey="",tip=''
        for (const key in this.userinfo) {
          if (Object.hasOwnProperty.call(this.userinfo, key)) {
            if(!this.userinfo[key]){
              errKey=key
            }
          }
        }
        switch (errKey) {
          case 'u_nick':
            tip='昵称不能为空'
            break;
          case 'u_phone':
            tip='电话不能为空'
            break;
          case 'u_email':
            tip='邮箱不能为空'
            break;
        }
        if(tip) return this.$Toast(tip)
        let params={
          id:this.userinfo.u_id,
          photo:this.userinfo.u_photo,
          nick:this.userinfo.u_nick,
          sex:this.userinfo.u_sex,
          email:this.userinfo.u_email,
          phone:this.userinfo.u_phone,
        }
        const { data,status }  = await this.$Api.apiUser.apdataUser(params)
        if(status==-200){
          this.$Toast('更新失败')
        }
        console.log(data,status);
        if(status==200){
          localStorage.removeItem('userinfo')
          localStorage.setItem('userinfo', JSON.stringify(data.data))
          this.$Toast('更新成功')
        }
      },
      async upload(files){
        let params=new FormData()
        params.append('files',files.file,files.file.name)
        const { data,code } = await this.$Api.apiUser.uploadImg(params)
        this.userinfo.u_photo=data.data.path.replace('public','/mogu');
        console.log(data,code);
      }


    }
  }
</script>
<style lang="less" scoped>
.my_info{
  width: 100vw;
  height: 100vh;
  // padding: 0 10px;
  background-color: pink;
  box-sizing: border-box;
  text-align: center;
  .user_header{
    width:30vw;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 50%;
    transform: translateX(-50%);
    .header_img{
      width: 20vw;
      height: 20vw;
      border-radius: 50%;
      overflow: hidden;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
  .user_cell_form{
    width: 90%;
    opacity: 0.6;
    margin-left: 50%;
    transform: translateX(-50%);
   /deep/ .van-cell__title{
      text-align: left;
    }
    /deep/.van-field__control{
      text-align: right;
      // float: right;
    }
  }
  .sex_option{
    width: 100%;
    text-align: right;
    /deep/.van-radio{
      margin-left: 10px;
      float: right;
     
    }
  }
}
</style>
